<!-- css 选择器   类选择器   .类名  ID选择器   #ID   标签选择器 标签 -->
<template>
  <div class="bigDiv blueBg"></div>

  <div class="smallDiv regBg"></div>

  <span id="notice">有电请注意</span>

  <p>床前明月光</p>
  <p class="boldFont">疑是地上霜</p>
  <p>举头望明月</p>
  <p>低头思故乡</p>

</template>

<script>
export default {
  name: "App8"
}
</script>
<!--
  至少需要掌握三个选择器

  类选择器   .类名
  ID选择器   #ID
  标签选择器  标签
-->
<style scoped>

    .bigDiv{
      width: 300px;
      height: 300px;
    }

    .smallDiv{
      width: 150px;
      height: 150px;
    }

    .regBg{
      background-color: red;
    }

    .blueBg{
      background-color: blue;
    }

    #notice {
      font-weight: bold;
      color: red;
    }

    .boldFont{
      font-weight: bold;
    }

    p{
      color: #646cff;
    }

</style>